<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime: 2019-11-28 15:58:02
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>Hello APP</title>
		<link rel="stylesheet" type="text/css" href="../../css/vant.css">
		<link rel="stylesheet" type="text/css" href="../../css/base.css" />
		<script type="text/javascript" src="../../script/jquery.js"></script>
		<script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
		<script type="text/javascript" src="../../script/vue.min.js"></script>
		<script type="text/javascript" src="../../script/vant.min.js"></script>
		<script type="text/javascript" src="../../script/fastclick.js"></script>
		<script type="text/javascript" src="../../script/base.js"></script>
		<style type="text/css">
			.van-search {
				padding: 6px 0;
				border-bottom: 1px solid #ebedf0;
			}

			.van-search__action {
				color: #cd1b21;
				font-size: 13px;
				font-weight: 700;
			}

			.result {
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
			}

			.desc {
				color: #969799;
			}

			/* 弹窗样式 */
			.PopupNavBar {
				background-color: #fff !important;
			}

			.PopupNavBar .van-nav-bar__left {
				width: 100%;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="box">
				<van-nav-bar-main title="筛选" left-arrow @click-left="onClickLeft">
					<div slot="right">
						<span v-if="allowClear" @click="clear">清空</span>
					</div>
				</van-nav-bar-main>
				<div class="content flex-box flex-direction-c">
					<div v-if="showSearch">
						<form action="">
							<van-search v-model="searchKey[searchKey]" placeholder="请输入搜索关键词" show-action
								@search="getSearchList" v-if="serverSearch">
								<div slot="action" @click="getSearchList">查询</div>
							</van-search>
							<van-search v-model="localSearchKey" placeholder="请输入搜索关键词" v-on:input="filterList"
								@search="filterList" v-if="!serverSearch">
							</van-search>
						</form>
					</div>
					<div class="flex-main result">
						<div v-if="!isPaging">
							<van-cell v-for="row in filterResult" clickable @click="selectRow(row)" v-if="!row.isHide">
								<div>
									<div>{{row.name}}</div>
								</div>
							</van-cell>
						</div>

						<van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了"
							@load="listOnLoad" v-if="isPaging">
							<van-cell v-for="row in filterResult" clickable @click="selectRow(row)">
								<div>
									<div>{{row.name}}</div>
								</div>
							</van-cell>
						</van-list>
					</div>
				</div>

			</div>
		</div>
	</body>

	<script type="text/javascript">
		var vm;

		vm = new Vue({
			el: '#app',
			data: {
				ReportPopupWidth: '500px',
				showLoading: false,
				listLoading: false,
				listFinished: true,
				filterData: '',
				type: '',
				allowClear: false,
				showSearch: false,
				serverSearch: false,
				searchBy: [],
				searchKey: '',
				isPaging: false,
				cmd: '',
				filterResult: [],
				localSearchKey: '',
			},
			created: function() {
				this.getSearchList();
			},
			methods: {
				openBaseScreen(str) {
					if (str == '通知人') {
						var obj = {
							allowClear: false,
							showSearch: true,
							searchKey: '',
							serverSearch: false,
							searchBy: ['name'],
							isPaging: false,
							type: str,
							cmd: 'ZS_getCheckMan',
							param: {},
							ListArr: vm.ReportForm.Noticer
						}
					}

					// api.openWin({
					// 	name: 'baseScreenToReport',
					// 	url: 'baseScreenToReport.html',
					// 	reload: true,
					// 	slidBackEnabled: false,
					// 	pageParam: obj
					// })
				},
				filterList: function() {
					var that = this;
					for (var i in that.filterResult) {
						var x = 0;
						for (var j in that.searchBy) {
							if ((that.filterResult[i][that.searchBy[j]] + '').toUpperCase().indexOf(that
									.localSearchKey.toString().toUpperCase()) > -1) {
								x = 1;
								this.$set(that.filterResult[i], 'isHide', false);
							}
						}
						if (x == 0) {
							this.$set(that.filterResult[i], 'isHide', true);
						}
					}
				},
				getSearchList: function() {
					var that = this;
					if (that.isPaging) {
						that.filterData.pageIndex = 1;
					}
					APP.ajax(that.cmd, that.filterData, function(res) {
						
						

						that.filterResult = res.ds;
						
					})
				},
				listOnLoad: function() {
					var that = this;
					that.filterData.pageIndex++;
					APP.ajax(that.cmd, that.filterData, function(res) {
						that.listLoading = false;
						if (res.ds.length == 0) {
							that.listFinished = true;
						}
						that.filterResult = that.filterResult.concat(res.ds);
					})
				},
				selectRow: function(row) {
					var that = this;

					// api.sendEvent({
					// 	name: 'selectRow',
					// 	extra: {
					// 		row: row,
					// 		type: that.type,
					// 	}
					// });
					// api.closeWin();
				},
				clear: function() {
					var that = this;
					// api.sendEvent({
					// 	name: 'selectRow',
					// 	extra: {
					// 		row: null,
					// 		type: that.type
					// 	}
					// });
					// api.closeWin();
				},
				onClickLeft() {
					// api.closeWin();
				}
			}
		})
	</script>

</html>